import { motion, AnimatePresence } from "framer-motion"
import clsx from "clsx"

interface ChatMessagesProps {
    messages: string[]
}

const ChatMessages = ({ messages }: ChatMessagesProps) => {
    return (
        <div className="flex-1 overflow-y-auto p-4 space-y-2 scrollbar-thin scrollbar-thumb-blue-400">
            <AnimatePresence>
                {messages.map((msg, idx) => (
                    <motion.div
                        key={idx}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -10 }}
                        transition={{ duration: 0.2 }}
                        className={clsx(
                            "p-2 rounded-lg text-sm shadow-sm max-w-[75%]",
                            idx % 2 === 0
                                ? "self-start bg-gray-100 text-gray-800"
                                : "self-end bg-blue-100 text-blue-900"
                        )}
                    >
                        {msg}
                    </motion.div>
                ))}
            </AnimatePresence>
        </div>
    )
}

export default ChatMessages
